﻿@using Ci.Presentation.Web.Models
@using Newtonsoft.Json;
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Consultas";   
}

<div class="page-header">
    <h1>@ViewBag.Title <small>Vista general de la consulta</small></h1>
</div>

@Html.Partial("_Toolbar", new ToolbarVM
{
    Name = "Consulta"
})

<!-- start: PAGE CONTENT -->
<div class="row">
    <!-- Datos Consulta -->
    <div class="col-sm-12 col-md-4">
        <!-- start: TEXT FIELDS PANEL -->
        <div class="panel panel-default">
            <div class="panel-heading">
                <i class="icon-external-link-sign"></i>Datos de la Consulta
                <div class="panel-tools">
                    <a class="btn btn-xs btn-link panel-collapse collapses" href="#"></a>
                    <a class="btn btn-xs btn-link panel-refresh" href="#">
                        <i class="icon-refresh"></i>
                    </a>
                    <a class="btn btn-xs btn-link panel-expand" href="#">
                        <i class="icon-resize-full"></i>
                    </a>
                </div>
            </div>
            <div class="panel-body" style="display: block;">
                <form role="form" class="form-horizontal">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <div class="space20"></div>
                            <div class="col-sm-6 no-padding">
                                <div class="col-sm-12">
                                    <label for="form-field-1">Número de Consulta</label>
                                </div>
                                <div class="col-sm-12">
                                    <input type="text" id="txtNumeroConsulta" class="form-control" readonly="true">
                                </div>
                            </div>
                            <div class="col-sm-6 no-padding">
                                <div class="col-sm-12">
                                    <label for="form-field-1">Fecha</label>
                                </div>
                                <div class="col-sm-12">
                                    @*<input type="text" id="kdtpFecha">*@
                                    <div class="input-group">
                                        <input type="text" id="dtpFecha" data-date-format="dd-mm-yyyy" data-date-viewmode="years" class="form-control date-picker">
                                        <span class="input-group-addon"><i class="icon-calendar"></i></span>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group">
                            <div class="col-sm-12 no-padding">
                                <div class="col-sm-12">
                                    <label for="form-field-1">Motivo de Consulta</label>
                                </div>
                                <div class="col-sm-12">
                                    <input type="text" id="txtMotivoConsulta" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-12">
                        <div class="form-group">
                            <div class="col-sm-12 no-padding">
                                <div class="col-sm-12">
                                    <label for="form-field-1">Síntomas</label>
                                </div>
                                <div class="col-sm-12">
                                    <input type="text" id="txtSintomas" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group">
                            <div class="col-sm-12 no-padding">
                                <div class="col-sm-12">
                                    <label for="form-field-1">Observación</label>
                                </div>
                                <div class="col-sm-12">
                                    <textarea class="autosize form-control" id="txtObservacion" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 50px;"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <!-- end: TEXT FIELDS PANEL -->
        </div>
    </div>

    <!-- Datos Paciente -->
    <div class="col-sm-12 col-md-8">
        <!-- start: TEXT FIELDS PANEL -->
        <div class="panel panel-default">
            <div class="panel-heading">
                <i class="icon-external-link-sign"></i>
                Datos del Paciente
                <div class="panel-tools">
                    <a class="btn btn-xs btn-link panel-collapse collapses" href="#"></a>
                    <a class="btn btn-xs btn-link panel-refresh" href="#">
                        <i class="icon-refresh"></i>
                    </a>
                    <a class="btn btn-xs btn-link panel-expand" href="#">
                        <i class="icon-resize-full"></i>
                    </a>
                </div>
            </div>
            <div class="panel-body" style="display: block; padding: 0px 0px 15px;">
                <div class="space10 toolbar">
                    <a data-toggle="modal" class="btn btn-xs btn-primary" role="button" href="#Paciente">Buscar Paciente
                    </a>
                    <a id="VerOdontograma" data-toggle="modal" class="btn btn-xs btn-default" role="button" href="#odontograma">Ver Odontograma
                    </a>
                </div>
                <form role="form" class="form-horizontal">
                    <div class="col-sm-9">
                        <div class="form-group">
                            <div class="col-sm-12 no-padding">
                                <div class="col-sm-12">
                                    <label for="form-field-1">
                                        Código
                                    </label>
                                </div>
                                <div class="col-sm-4">
                                    <input type="text" id="txtCodigo" class="form-control" readonly="true">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-4 no-padding">
                                <div class="col-sm-12">
                                    <label for="form-field-1">
                                        DNI
                                    </label>
                                </div>
                                <div class="col-sm-12">
                                    <input type="text" id="txtDni" class="form-control" readonly="true">
                                </div>
                            </div>
                            <div class="col-sm-8 no-padding">
                                <div class="col-sm-12">
                                    <label for="form-field-1">Nombres y Apellidos</label>
                                </div>
                                <div class="col-sm-12">
                                    <input type="text" id="txtNombresApellidos" class="form-control" readonly="true">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-9 no-padding">
                                <div class="col-sm-12">
                                    <label for="form-field-1">Dirección</label>
                                </div>
                                <div class="col-sm-12">
                                    <input type="text" id="txtDireccion" class="form-control" readonly="true">
                                </div>
                            </div>
                            <div class="col-sm-3 no-padding">
                                <div class="col-sm-12">
                                    <label for="form-field-1">
                                        Teléfono
                                    </label>
                                </div>
                                <div class="col-sm-12">
                                    <input type="text" id="txtTelefono" class="form-control" readonly="true">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-3 no-padding">
                                <div class="col-sm-12">
                                    <label for="form-field-1">Sexo</label>
                                </div>
                                <div class="col-sm-12">
                                    <input type="text" id="txtSexo" class="form-control" readonly="true">
                                </div>
                            </div>
                            <div class="col-sm-3 no-padding">
                                <div class="col-sm-12">
                                    <label for="form-field-1">Edad</label>
                                </div>
                                <div class="col-sm-12">
                                    <input type="text" id="txtEdad" class="form-control" readonly="true">
                                </div>

                            </div>
                            <div class="col-sm-3 no-padding">
                                <div class="col-sm-12">
                                    <label for="form-field-1">
                                        Estado Civil
                                    </label>
                                </div>
                                <div class="col-sm-12">
                                    <input type="text" id="txtEstadoCivil" class="form-control" readonly="true">
                                </div>
                            </div>
                            <div class="col-sm-3 no-padding">
                                <div class="col-sm-12">
                                    <label for="form-field-1">País de Origen</label>
                                </div>
                                <div class="col-sm-12">
                                    <input type="text" id="txtPaisOrigen" class="form-control" readonly="true">
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-sm-3">
                        <div class="thumbnail photo">
                            <i class="clip-user-5"></i>
                        </div>
                    </div>
                </form>
            </div>
            <!-- end: TEXT FIELDS PANEL -->
        </div>
    </div>
    <!-- end: PAGE CONTENT-->
</div>

<div class="row">
    <!-- Datos Odontograma -->
    <div class="col-sm-12">
        <div id="FichaOdontograma" class="panel panel-default">
            <div class="panel-heading">
                <i class="icon-external-link-sign"></i>Vista del Odontograma
                                <div class="panel-tools">
                                    <a class="btn btn-xs btn-link panel-collapse collapses" href="#"></a>
                                    <a class="btn btn-xs btn-link panel-refresh" href="#">
                                        <i class="icon-refresh"></i>
                                    </a>
                                    <a class="btn btn-xs btn-link panel-expand" href="#">
                                        <i class="icon-resize-full"></i>
                                    </a>
                                </div>
            </div>

            <div class="panel-body" style="display: block;">
                <div class="space10 toolbar">
                    <a data-toggle="modal" class="btn btn-xs btn-primary" role="button">Generar Receta
                    </a>
                    <a data-toggle="modal" class="btn btn-xs btn-default" role="button">Generar Tratamiento
                    </a>
                </div>

                <div id="OdontogramaContainer" class="col-sm-12">
                    <div class="col-sm-12 no-padding">
                        <div class="col-sm-6 no-padding">
                            <div class="col-xs-4"></div>
                            <a id="18" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-18.png" alt="">
                                </div>
                            </a>
                            <a id="17" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-17.png" alt="">
                                </div>
                            </a>
                            <a id="16" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-16.png" alt="">
                                </div>
                            </a>
                            <a id="15" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-15.png" alt="">
                                </div>
                            </a>
                            <a id="14" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-14.png" alt="">
                                </div>
                            </a>
                            <a id="13" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-13.png" alt="">
                                </div>
                            </a>
                            <a id="12" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-12.png" alt="">
                                </div>
                            </a>
                            <a id="11" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-11.png" alt="">
                                </div>
                            </a>
                        </div>
                        <div class="col-sm-6 no-padding">
                            <a id="21" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-21.png" alt="">
                                </div>
                            </a>
                            <a id="22" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-22.png" alt="">
                                </div>
                            </a>
                            <a id="23" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-23.png" alt="">
                                </div>
                            </a>
                            <a id="24" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-24.png" alt="">
                                </div>
                            </a>
                            <a id="25" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-25.png" alt="">
                                </div>
                            </a>
                            <a id="26" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-26.png" alt="">
                                </div>
                            </a>
                            <a id="27" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-27.png" alt="">
                                </div>
                            </a>
                            <a id="28" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-28.png" alt="">
                                </div>
                            </a>
                            <div class="col-xs-4"></div>
                        </div>
                        <div class="space20"></div>
                    </div>

                    <div class="col-sm-12 no-padding">
                        <div class="col-sm-6 no-padding">
                            <div class="col-xs-4"></div>
                            <a id="38" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-38.png" alt="">
                                </div>
                            </a>
                            <a id="37" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-37.png" alt="">
                                </div>
                            </a>
                            <a id="36" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-36.png" alt="">
                                </div>
                            </a>
                            <a id="35" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-35.png" alt="">
                                </div>
                            </a>
                            <a id="34" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-34.png" alt="">
                                </div>
                            </a>
                            <a id="33" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-33.png" alt="">
                                </div>
                            </a>
                            <a id="32" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-32.png" alt="">
                                </div>
                            </a>
                            <a id="31" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-31.png" alt="">
                                </div>
                            </a>
                        </div>
                        <div class="col-sm-6 no-padding">
                            <a id="41" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-41.png" alt="">
                                </div>
                            </a>
                            <a id="42" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-42.png" alt="">
                                </div>
                            </a>
                            <a id="43" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-43.png" alt="">
                                </div>
                            </a>
                            <a id="44" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-44.png" alt="">
                                </div>
                            </a>
                            <a id="45" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-45.png" alt="">
                                </div>
                            </a>
                            <a id="46" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-46.png" alt="">
                                </div>
                            </a>
                            <a id="47" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-47.png" alt="">
                                </div>
                            </a>
                            <a id="48" data-toggle="modal" href="#PiezaDental">
                                <div class="tooth thumbnail col-sm-1 no-padding">
                                    <img src="~/assets/images/odontograma/tooth-48.png" alt="">
                                </div>
                            </a>
                            <div class="col-xs-4"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end: PAGE CONTENT -->

<!-- start: BOOTSTRAP EXTENDED MODALS -->
@Html.Partial("_Paciente")

@Html.Partial("_PiezaDental")

@Html.Partial("_BuscarConsulta")
<!-- end: BOOTSTRAP EXTENDED MODALS -->

<script src="~/assets/plugins/jquery/jquery.js"></script>
<script src="~/assets/plugins/kendo/js/kendo.web.min.js"></script>

<script>
    $(document).ready(function () {
        HideSettingsSideBar();
        FormElements.init();

        FichaOdontogramaSettings();

        ConsultaToolbar();

        $('#dtpFecha, #txtMotivoConsulta, #txtSintomas, #txtObservacion').attr('disabled', 'disabled');
    });

    function GetMaxConsulta() {
        $.get('@Url.Action("GetMaxConsulta", "Consulta")', function(data){
            debugger;
            $('#txtNumeroConsulta').val(data);
        });
    }

    function ConsultaToolbar() {
        $('#CrearConsulta').click(function () {
            debugger;
            GetMaxConsulta();
            $('#dtpFecha, #txtMotivoConsulta, #txtSintomas, #txtObservacion').removeAttr('disabled', 'disabled');
        });

        /* Guardar la consulta */
        $('#GuardarConsulta').click(function () {
            var model = {
                //'idConsultaDental': $('#txtNumeroConsulta').val(),
                'fechaCreacion': $('#dtpFecha').val(),
                'motivoConsulta': $('#txtMotivoConsulta').val(),
                'sintomas': $('#txtSintomas').val(),
                'observacion': $('#txtObservacion').val(),
                'idCodigoPaciente': $('#txtCodigo').val()
            };

            $.get('@Url.Action("Save", "Consulta")?model=' + JSON.stringify(model), function (data) {
                LimpiarDatosConsulta();
                $('#dtpFecha, #txtMotivoConsulta, #txtSintomas, #txtObservacion').attr('disabled', 'disabled');
                alert('La consulta fue guardada satisfactoriamente');
            });
        });

        $('#EditarConsulta').click(function () {
            $('#dtpFecha, #txtMotivoConsulta, #txtSintomas, #txtObservacion').removeAttr('disabled', 'disabled');
        });

        $('#CancelarConsulta').click(function () {
            LimpiarDatosConsulta();
        });
    }

    //function EstadosToolbar(estado) {
    //    $('#GuardarConsulta').visible
    //}

    function LimpiarDatosConsulta() {
        $('#txtNumeroConsulta').val(''),
        $('#dtpFecha').val(''),
        $('#txtMotivoConsulta').val(''),
        $('#txtSintomas').val(''),
        $('#txtObservacion').val(''),
        $('#txtCodigo').val('')

        $('#txtCodigo').val('');
        $('#txtDni').val('');
        $('#txtNombresApellidos').val('');
        $('#txtDireccion').val('');
        $('#txtTelefono').val('');
        $('#txtSexo').val('');
        $('#txtEdad').val('');
        $('#txtEstadoCivil').val('');
        $('#txtPaisOrigen').val('');
    }

    function FichaOdontogramaSettings() {
        /* Oculta Ficha Odontograma */
        $('#FichaOdontograma').hide();

        /* Vincula boton Ver Odontograma con Ficha Odontograma para mostrar/ocultar al hacer click */
        $('#VerOdontograma').click(function (e) {
            $('#FichaOdontograma').slideToggle();
        });

        /* Muestra ventana modal de al hacer click en una pieza dental */
        $('#OdontogramaContainer').find('a').click(function () {
            GetPiezaDental($(this).attr('id'));
        });
    }
</script>
